<template>
  <div class="member">
    <div class="head">
      <div class="top">
        <span></span>
        <span>会员中心</span>
        <span class="icon-nav-w" @click="showPanel = true"></span>
      </div>

      <div class="center">
        <div class="avatar">
          <img :src="userInfo.avatar">
        </div>
        <p class="nickname">{{userInfo.name}}</p>
        <p class="phone">{{userInfo.phone}}</p>
      </div>
    </div>
    <div class="company">
      {{userInfo.house}}
      <router-link :to="{path:'/bindaccount'}" tag="i" class="icon-exchange"></router-link>
    </div>
    <div class="content">
      <ul>
        <router-link to="/myprofile" tag="li">
          <span>
            <i class="icon-profile"></i>个人资料
          </span>
          <em class="icon-right"></em>
        </router-link>
        <router-link to="/myfee" tag="li">
          <span>
            <i class="icon-money"></i>在线缴费
          </span>
          <em class="icon-right"></em>
        </router-link>
        <router-link to="/feerecord" tag="li">
          <span>
            <i class="icon-fee-record"></i>缴费记录
          </span>
          <em class="icon-right"></em>
        </router-link>
        <router-link to="/myprotectrecord" tag="li">
          <span>
            <i class="icon-aegis-record"></i>我的报修记录
          </span>
          <em class="icon-right"></em>
        </router-link>
        <router-link to="/myresource" tag="li">
          <span>
            <i class="icon-resources"></i>我的房产
          </span>
          <em class="icon-right"></em>
        </router-link>
      </ul>
    </div>
    <!--侧边导航栏-->
    <transition name="slide">
      <panel v-if="showPanel"></panel>
    </transition>
    <!--遮罩-->
    <transition name="fade">
      <overlay v-if="showPanel" v-on:closeOverlay="closeoverlay"></overlay>
    </transition>
    <loading v-if="is_loading"></loading>
    <toast v-if="toast">
      <p slot="text">{{toastText}}</p>
    </toast>
  </div>
</template>

<script>
import panel from "components/panel/panel";
import overlay from "components/overlay/overlay";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    panel,
    overlay
  },
  data() {
    return {
      showPanel: false,
      userInfo: {} // 用户相关信息
    };
  },
  beforeCreate() {
    // alert(window.location.href);
  },
  created() {
    //判断是否有token
    if (!this.token) {
      this.getOpenId();
    } else {
      this.isBind();
    }
  },
  methods: {
    getOpenId() {
      this.axios
        .post(root + "/api/weixin/getOpenId", { token: this.$route.query.code })
        .then(res => {
          if (res.data.status == "1") {
            // alert(res.data.data.openid);
            this.storeToken(res.data.data.openid);
            this.isBind();
          } else {
            this.Toast("网页未获得微信授权！");
          }
        });
    },
    isBind() {
      // 判断是否绑定账号
      this.isLoading(true);
      this.axios
        .post(root + "/api/member/isBind", { token: this.token })
        .then(res => {
          this.isLoading(false);
          // console.log(res.data.status=='1');
          res.data.status == "1"
            ? this.fetchData()
            : this.Toast("请先进行账号绑定", () => {
                this.$router.replace("/bindaccount");
              });
        });
    },
    fetchData() {
      this.axios
        .post(root + "/api/member/memberCenter", { token: this.token })
        .then(res => {
          this.isLoading(false);
          this.userInfo = res.data.data;
        });
    },
    goback() {
      this.$router.go(-1);
    },
    closeoverlay(data) {
      this.showPanel = data;
    },
    ...mapActions(["isLoading"])
  },
  computed: {
    ...mapState(["toast", "toastText", "token", "is_loading"])
  }
};
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
@import "../../common/style/transition.less";
.member {
  .init;
  .head {
    height: 4.47rem;
    background-image: linear-gradient(
      -160deg,
      #45eac1 4%,
      #5b96fd 100%,
      #5b91fe 100%
    );
    .top {
      .layout-between-height;
      height: 1.1rem;
      color: #fff;
      .ft(0.36rem);
      padding: 0 0.3rem;
      .icon-back {
        .wh(0.5rem, 0.5rem);
        background: url("./icon-back.png") no-repeat;
        background-size: contain;
      }
      .icon-nav-w {
        .wh(0.5rem, 0.5rem);
        background: url("./icon-nav.png") no-repeat;
        background-size: contain;
      }
    }
    .center {
      .layout-center;
      flex-direction: column;
      color: #fff;
      .avatar {
        .wh(1.4rem, 1.4rem);
        overflow: hidden;
        border-radius: 50%;
        border: 5px solid rgba(255, 255, 255, 0.6);
        img {
          .wh(100%; 100%);
        }
      }
      .nickname {
        .ft(0.28rem);
        margin-top: 0.23rem;
      }
      .phone {
        .ft(0.28rem);
        margin-top: 0.18rem;
      }
    }
  }
  .company {
    .layout-center;
    position: relative;
    .wh(6.9rem, 1rem);
    .ft(0.28rem);
    line-height: 1.2;
    padding: 0 0.8rem 0 0.3rem;
    margin: -0.5rem auto 0;
    background: #ffffff;
    box-shadow: 0 2px 5px 0 rgba(91, 144, 254, 0.25);
    border-radius: 4px;
    color: #5b91fe;
    .icon-exchange {
      position: absolute;
      right: 0.3rem;
      top: 0.3rem;
      .wh(0.42rem, 0.42rem);
      background: url("./change.png") no-repeat;
      background-size: contain;
    }
  }
  .content {
    margin-top: 0.4rem;
    li {
      .layout-between-height;
      height: 1rem;
      background: #fff;
      color: #5b91fe;
      .ft(0.24rem);
      margin-bottom: 0.2rem;
      padding: 0 0.3rem;
      i {
        .wh(0.42rem, 0.42rem);
        margin-right: 0.28rem;
        vertical-align: middle;
      }
      i.icon-myproduct {
        background: url("./icon-myproduct.png") no-repeat;
        background-size: contain;
      }
      i.icon-aegis-record {
        background: url("./icon-aegis-record.png") no-repeat;
        background-size: contain;
      }
      i.icon-resources {
        background: url("./icon-resources.png") no-repeat;
        background-size: contain;
      }
      i.icon-profile {
        background: url("./icon-profile.png") no-repeat;
        background-size: contain;
      }
      i.icon-money {
        background: url("./icon-money.png") no-repeat;
        background-size: contain;
      }
      i.icon-fee-record {
        background: url("./icon-fee-record.png") no-repeat;
        background-size: contain;
      }
      em {
        .wh(0.3rem; 0.3rem);
        background: url("./icon-arrow.png") no-repeat;
        background-size: contain;
      }
    }
  }
}
</style>